<template>
  <div class="all">
     <header>
       <div class="div">
         <img src="../../assets/返回.png" @click="back()" alt="">
         <span class="solid" @click="back()">返回</span>
       </div>
       <div class="div">
         <span>功能模块密码设置</span>
       </div>
       <div class="div">
         <span class="solid"></span>
       </div>
     </header>
    <table border="0"
           cellspacing="0"
           cellpadding="0">
      <thead>
      <tr class="tabTitle">
        <th >序号</th>
        <th>功能模块名称</th>
        <th>密码</th>
        <th>与登录密码一致</th>
      </tr>
      </thead>
      <tbody>
        <tr class="tabCon" v-for="(item, index) in menuList" :key="index">
          <td width="50" style="text-align: center">{{index+1}}</td>
          <td width="100" style="text-align: center">{{item.MENU_NAME}}</td>
          <td width="100" class="input_td">
            <input
              :readonly="Number(item.is_user_password) === 1"
              v-model="item.password"
              @blur.stop="seavePwd(item.ID, item.password, item.is_user_password)"
              style="width: 80%;height: 100%;border: none;padding: 0 10px;box-sizing: border-box"
              :type="item.inputType">
            <img src="../../assets/密码隐藏.png"
                 @click="item.inputType = 'text'"
                 v-if="Number(item.is_user_password) === 0 && item.inputType === 'password'"
                  alt="">
            <img src="../../assets/密码展示.png"
                 @click="item.inputType = 'password'"
                 v-else-if="Number(item.is_user_password) === 0 && item.inputType === 'text'"
                  alt="">
          </td>
          <td width="100" style="text-align: center;line-height: 35px">
            <img style="width: 15px;height: 15px;vertical-align: middle" @click.stop="select(item)"
                 v-show="Number(item.is_user_password) === 0"
                 src="../../assets/蓝未选择.png" alt="">
            <img style="width: 15px;height: 15px;vertical-align: middle" @click.stop="select(item)"
                 v-show="Number(item.is_user_password) === 1"
                 src="../../assets/题目选择.png" alt="">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'PasswordList',
  data () {
    return {
      menuList: [],
      pwdLength: 0
    }
  },
  mounted () {
    this.getPwdLength()
    this.getMenu()
  },
  methods: {
    // eslint-disable-next-line camelcase
    seavePwd (menu_id, password, is_user_password) {
      if (Number(is_user_password) === 1) {
        password = ''
      }
      // if (password === '**********') {
      //   password = ''
      // }
      this.$http.saveMenuPass({menu_id: menu_id, password: password, is_user_password: is_user_password})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getPwdLength () {
      this.$http.getPassLength({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.pwdLength = res.data.data
            console.log(this.pwdLength)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 选中
    select (item) {
      // 选中变未选中
      if (Number(item.is_user_password) === 1) {
        item.is_user_password = 0
        item.password = ''
        this.seavePwd(item.ID, item.password, item.is_user_password)
      } else if (Number(item.is_user_password) === 0) { // 未选中变选中
        item.is_user_password = 1
        item.password = ''
        for (var i = 0; i < this.pwdLength; i++) {
          item.password += '*'
        }
        this.seavePwd(item.ID, item.password, item.is_user_password)
        // item.password = '**********'
      }
    },
    // 获取每个模块
    getMenu () {
      this.$http.getMenus({})
        .then(res => {
          console.log(res)
          // this.menuList = res.data
          for (var i in res.data) {
            if (res.data[i].MENU_URL !== '#') {
              this.menuList.push(res.data[i])
            }
          }
          this.getPassword(this.menuList[0].ID, 0)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getPassword (id, i) {
      if (i === this.menuList.length) {
        return false
      }
      this.$http.getMenusPass({menu_id: id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            if (res.data.data === null) {
              this.$set(this.menuList[i], 'is_user_password', 0)
              this.$set(this.menuList[i], 'password', '')
            } else {
              this.$set(this.menuList[i], 'is_user_password', res.data.data.is_user_password)
              this.$set(this.menuList[i], 'password', res.data.data.password)
              if (Number(res.data.data.is_user_password) === 1) {
                var pwd = ''
                for (var k = 0; k < Number(this.pwdLength); k++) {
                  pwd += '*'
                }
                this.$set(this.menuList[i], 'password', pwd)
              }
            }
            this.$set(this.menuList[i], 'inputType', 'password')
            // this.menuList[i].input = res.data.data
            i++
            this.getPassword(this.menuList[i].ID, i)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
     background: white;
     position: sticky;
     top: 0;
     z-index: 9;
   }
   .div{
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     margin-right: 5px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(1){
     width: 30%;
   }
   .div:nth-child(2){
     width: 40%;

     justify-content: center;
   }
   .div:nth-child(3){
     width: 30%;
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
   table{
     width: 95%;
     background: white;
     border: 1px solid #E5E5E5;
     margin: 0 auto;
     font-size: 13px;
   }
  .tabTitle{
    width: 100%;
    height: 40px;
  }
  .tabTitle th, td{
    border-left: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
  }
  .tabCon{
    width: 100%;
    /*height: 25px;*/
  }
  thead{
    background: #1DA4F2;
    color: white;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    position: sticky;
    top: 44px;
  }
  thead tr{
    /*height: 35px;*/
  }
  tbody tr td{
    height: 35px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 35px;
  }
  .input_td input{
   float: left;
  }
  .input_td img{
   float: left;
    width: 10px;
    height: 8px;
    margin-top: 12px;
    margin-right: 3px;
  }
</style>
